<!--
 * @Description: 预约状况
 * @Autor: 何兴家
 * @Date: 2021-01-29 13:56:45
 * @LastEditors: 何兴家
 * @LastEditTime: 2021-02-03 14:37:28
-->
<template>
  <div>
    <TopFilter ref="topFilter" :list="topFilterList" :labelWidth="100" @filterChange="handleSearch" :collapse="false"></TopFilter>

    <BreakSpace label="预约情况" :containerStyle="{ marginBottom: '10px' }"></BreakSpace>
    <FilterTable
      ref="timeTable"
      height="auto"
      columnsRef="repair_repairReception_precontractArrage_precontractStatus_time"
      :isPagination="false"
      :isSelectColumn="false"
      :dataSource="timeTableDataSource"
      :columns="timeColumns"
      :onColumnsChange="columns => (this.timeColumns = columns)"
    >
    </FilterTable>

    <BreakSpace label="预约单列表" :containerStyle="{ marginBottom: '10px' }"></BreakSpace>
    <FilterTable
      ref="bookingTable"
      height="auto"
      columnsRef="repair_repairReception_precontractArrage_precontractStatus_booking"
      :isPagination="false"
      :isSelectColumn="false"
      :dataSource="bookingTableDataSource"
      :columns="bookingColumns"
      :onColumnsChange="columns => (this.bookingColumns = columns)"
    >
    </FilterTable>

    <div class="dialogBottmView">
      <el-button @click="handleCancel" type="primary">确定</el-button>
    </div>
  </div>
</template>

<script>
import moment from 'moment';
import { dictionary } from '@/utils/dictMixin';
import { confirmAction, notifyAction, findFormItem, findTableItem } from '@/utils';
import { queryBookCondition } from '@/api/repair/repairReception/precontractArrange';

export default {
  mixins: [dictionary],
  data() {
    return {
      topFilterList: this.createTopFIlterList(),
      timeColumns: this.createTimeTableColumns(),
      bookingColumns: this.createBookingColumns(),
      timeTableDataSource: [],
      bookingTableDataSource: [],
      syncTableData: [] // 同步的table数据
    };
  },
  methods: {
    createTopFIlterList() {
      return [
        {
          type: 'SELECT',
          label: '预约类别',
          fieldName: 'bookingTypeCode',
          itemList: [
            { text: '客户预约', value: '80551001' },
            { text: '被动预约', value: '80551002' }
          ]
        },
        {
          type: 'DATE',
          label: '预约进厂时间',
          fieldName: 'bookingComeTime',
          initialValue: moment().format('YYYY-MM-DD HH:mm:ss'),
          minDateTime: moment().format('YYYY-MM-DD') + ' 00:00:00',
          rules: [{ required: true, message: '请选择预约进厂时间', trigger: 'blur' }]
        }
      ];
    },
    createTimeTableColumns() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 80,
          sorter: true,
          render: props => {
            return <span>{props.row.$index + 1}</span>;
          }
        },
        {
          title: '预约时间段',
          dataIndex: 'TIME'
        },
        {
          title: '预约限量',
          dataIndex: 'week',
          sorter: true,
          filter: true,
          filterType: 'number'
        },
        {
          title: '预约数量',
          dataIndex: 'surplus',
          sorter: true,
          filter: true,
          filterType: 'number'
        }
      ];
    },
    createBookingColumns() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 80,
          sorter: true,
          render: props => {
            return <span>{props.row.$index + 1}</span>;
          }
        },
        {
          title: '预约单号',
          dataIndex: 'BOOKING_ORDER_NO',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '车牌号',
          dataIndex: 'LICENSE',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: 'VIN',
          dataIndex: 'VIN',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '预约进厂时间',
          dataIndex: 'bookingComeTime',
          sorter: true,
          filter: true,
          filterType: 'date-range'
        }
      ];
    },
    // 点击搜索
    handleSearch(e) {
      this.queryMainData(e);
    },
    // 点击取消
    handleCancel() {
      this.$emit('close');
    },
    // 查询预约数据
    async queryMainData(params) {
      this.$refs.timeTable.START_LOADING();
      this.$refs.bookingTable.START_LOADING();
      try {
        let res = await queryBookCondition(params);
        if (res.resultCode == 200) {
          this.timeTableDataSource = res.data.itemList;
          this.bookingTableDataSource = res.data.orderList;
        }
      } catch (err) {
        console.log(err, '获取预约情况数据失败');
      } finally {
        this.$refs.timeTable.STOP_LOADING();
        this.$refs.bookingTable.STOP_LOADING();
      }
    },
    // 同步table数据
    handleSyncTableData(list) {
      this.syncTableData = list;
    }
  }
};
</script>

<style scoped></style>
